<template>
  <button :class="[size, type]" @click="handleClick">{{ value }}</button>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: "确定"
    },
    size: {
      type: String,
      default: "medium"
    },
    type: {
      type: String,
      default: "default"
    }
  },
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 14px;
}
.small {
  padding: 5px 10px;
  font-size: 12px;
}
.large {
  padding: 15px 30px;
  font-size: 16px;
}
.default {
  color: #333;
  background-color: #fff;
}
.primary {
  color: #fff;
  background-color: #e6a23c;
}
.success {
  color: #fff;
  background-color: #67c23a;
}
.info {
  color: #fff;
  background-color: #409eff;
}
.danger {
  color: #fff;
  background-color: #f56c6c;
}
</style>